<!-- 执行日志 -->
<template>
  <div class="journal">
    <el-card class="!border-none" shadow="never">
      <el-form class="ls-form" :model="formData" inline>
        <el-form-item label="执行器">
          <el-select
            class="w-[280px]"
            v-model="formData.jobGroup"
            placeholder="执行器"
          >
            <el-option
              v-for="(item, index) in jobGroupArray"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务">
          <el-select
            class="w-[280px]"
            v-model="formData.jobId"
            placeholder="任务"
          >
            <el-option
              v-for="(item, index) in jobInfoArray"
              :key="index"
              :label="item.jobDesc"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            class="w-[280px]"
            v-model="formData.logStatus"
            placeholder="状态"
          >
            <el-option value="-1">全部</el-option>
            <el-option value="1">成功</el-option>
            <el-option value="2">失败</el-option>
            <el-option value="3">进行中</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-date-picker
            v-model="datetimerange"
            type="datetimerange"
            :default-time="defaultTime2"
            :shortcuts="shortcuts"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="changeDate"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
          <el-button @click="clearLog">清理</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <div style="margin-top: 10px">
        <el-table :data="pager.lists" size="large">
          <!-- <el-table-column label="记录ID" prop="operId" /> -->
          <el-table-column label="执行器" prop="jobGroup" min-width="140" />
          <el-table-column prop="jobId" label="任务" min-width="100" />
          <el-table-column
            prop="triggerTime"
            label="调度时间"
            min-width="100"
          />
          <el-table-column prop="triggerCode" label="调度结果" min-width="100">
            <template #default="{ row }">
              <el-tag v-if="row.triggerCode == 200"> 成功 </el-tag>
              <el-tag type="danger" v-if="row.triggerCode == 500">
                失败
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="triggerCode" label="调度备注" min-width="100">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleLook(1, row)">
                查看
              </el-button>
            </template>
          </el-table-column>

          <el-table-column prop="handleTime" label="执行时间" min-width="100" />
          <el-table-column prop="handleCode" label="执行结果" min-width="100">
            <template #default="{ row }">
              <el-tag v-if="row.handleCode == 200"> 成功 </el-tag>
              <el-tag type="danger" v-else-if="row.handleCode == 500">
                失败
              </el-tag>
              <el-tag v-else> </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="handleMsg" label="执行备注" min-width="100">
            <template #default="{ row }">
              <el-button
                v-if="row.handleCode == 500"
                type="primary"
                link
                @click="handleLook(2, row)"
              >
                查看
              </el-button>
              <tag v-else>无</tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="160" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)">
                执行日志
              </el-button>
              <el-button
                type="danger"
                v-if="row.handleCode == 0"
                link
                @click="stopJobHndle(row.id)"
              >
                终止任务
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="getLists"
      @close="showEdit = false"
    />

    <popup
      ref="popupRef"
      title="备注"
      :async="true"
      width="550px"
      @confirm="handleExecSubmit"
      @close="handleExecClose"
    >
      <p v-html="descValue"></p>
    </popup>
  </div>
</template>

<script lang="ts" setup>
import {
  pageListjobLog,
  clearJobLog,
  logKillJobLog,
  getJobsByGroup,
  pageListJobGroup
} from "@/api/system/jobapi";
import { timeFormatDate } from "@/utils/util";
import { usePaging } from "@/hooks/usePaging";
const { query } = useRoute();
import Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
import EditPopup from "./detail.vue";

let ndate = new Date();
const defaultTime2 = ref<[Date, Date]>([
  new Date(ndate.getFullYear(), ndate.getMonth() + 1, ndate.getDate(), 0, 0, 0),
  new Date(
    ndate.getFullYear(),
    ndate.getMonth() + 1,
    ndate.getDate(),
    23,
    59,
    59
  )
]);

const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const showEdit = ref(false);

const datetimerange = ref(""); //存储时间
const formData = reactive({
  jobGroup: String(query.jobGroup),
  jobId: String(query.jobId),
  logStatus: "-1",
  filterTime:
    timeFormatDate(defaultTime2.value[0]) +
    "-" +
    timeFormatDate(defaultTime2.value[1]) // 时间
});
const descValue = ref("");
const jobInfoArray = ref([]);
const jobGroupArray = ref([]);
const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: pageListjobLog,
  params: formData
});

/**
 * 确定选择日期
 */
const changeDate = (val: any) => {
  if (!val) {
    return;
  }
  console.log("选择了时间", val);
  formData.filterTime = timeFormatDate(val[0]) + "-" + timeFormatDate(val[1]); // 时间
};

/**
 * 执行查看备注操作
 */
const handleLook = async (type: number, row: any) => {
  descValue.value = type == 1 ? row.triggerMsg : row.handleMsg;
  popupRef.value?.open();
};

const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.getDetail(data);
};

const stopJobHndle = async (id: any) => {
  await feedback.confirm("确定要终止任务？");
  await logKillJobLog({ id });
  feedback.msgSuccess("操作成功");
  getLists();
};

const clearLog = async () => {
  await feedback.confirm("确定要清理此执行器日志？");
  await clearJobLog(formData);
  feedback.msgSuccess("操作成功");
  getLists();
};

//查询任务
getJobsByGroup({ jobGroup: formData.jobGroup }).then(res => {
  jobInfoArray.value = res;
});
pageListJobGroup({
  pageNum: 0,
  pageSize: 999
}).then(res => {
  jobGroupArray.value = res.data;
});
//查询所有调度器
getLists();
</script>

<style lang="scss" scoped></style>
